<template>
    
        <!-- {{ $route.path }} -->
        <!-- {{$router.options.routes}} -->
        <el-menu active-text-color="#ffd04b" background-color="#d9ecff" class="el-menu-vertical-demo" :default-active="$route.path"
            text-color="#000" unique-opened router="true">
            <template v-for="item in $router.options.routes">
                <el-menu-item :index="item.path" v-if="item.children == undefined && item.meta ? item.meta.show == true: ''">
                    <!--图标展示-->
                    <component :is="item.meta ? item.meta.icon :''" class="icon"></component>
                    <span>{{ item.meta ? item.meta.title:'' }}</span>
                </el-menu-item>

                <el-sub-menu :index="item.path" v-if="item.children != undefined && item.meta ? item.meta.show==true:''">
                    <template #title>
                        <component :is="item.meta ? item.meta.icon : ''" class="icon "></component>
                        <span>{{ item.meta ? item.meta.title:'' }}</span>
                    </template>
                    <el-menu-item-group v-for="child in item.children">
                        <el-menu-item :index="child.path" v-if="child.meta ?child.meta.show == true:''">
                            <component :is="child.meta ? child.meta.icon : ''" class="icon "></component>
                            <span>{{ child.meta? child.meta.title :'' }}</span>
                        </el-menu-item>
    
                    </el-menu-item-group>
                </el-sub-menu>
            </template>
        </el-menu>
    
</template>

<script setup lang="ts">

</script>

<style scoped>
.icon{
    width: 20px;
    height: 20px;
    padding-right: 5px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 92vh;
}
</style>